<%@ page language="java" contentType="text/html; charset=UTF8" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="component/jquery-3.1.1.js"></script>
<title>show add book</title>
<link rel="stylesheet" type="text/css" href="component/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="component/jquery-easyui-1.5.1/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="component/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="component/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
</head>
<body>

<div class="htmleaf-container">
	<div class="wrapper">
		<div class="container" id="addBook">
			<form action="saveBook.action" method="post" enctype="multipart/form-data" style="float:left;width:40%">
			<h1>Add book</h1>
			    BookName:<input type="text" name="addBookName" placeholder="BookName" required="required"/><br>
				BookImage:<input id="photo" type="file" name="addBookImage" required="required"/><br>
				BookAuthor:<input type="text" name="addBookAuthor" placeholder="BookAuthor" required="required"/><br>
				BookPress:<input type="text" name="addBookPress" placeholder="BookPress"/> <br>
				BookPublishdate:<input type="date" name="addbookPublishdate" placeholder="BookPublishdate"/><br>
				BookIsbn:<input type="text" name="addBookIsbn" placeholder="BookIsbn"/> <br>
			    <br>
			    <input type="submit" value="Add " style="color: white; background-color: blue" />
			    <button type="button" onclick= "window.location='searchBook.action?number=1&searchBookType=0&searchWord=&bookState='">Return</button>
			</form>
			<div style="float:right;width:60%;">
				<h1>Show picture</h1>
				<%-- <img src="${editBookList.bookImage}" style="width:200px;height:240px;"/> --%>
				<div id="click" style="width:200px;height:240px;">
			</div>
		</div>
	</div>
</div>
<script>
        document.getElementById('photo').addEventListener('change',function(e){  
	        var files = this.files;  
	        var img = new Image();  
	        var reader = new FileReader();  
	        reader.readAsDataURL(files[0]);  
	        reader.onload = function(e){  
	            var mb = (e.total/1024)/1024;  
	            if(mb>= 2){  
	                alert('文件大小大于2M');  
	                return;  
	            }  
	            img.src = this.result;  
	            img.style.width = "100%";  
	            img.style.height= "100%";  
	            document.getElementById('click').style.width="200px";  
	            document.getElementById('click').style.height="240px";  
	            document.getElementById('click').innerHTML = '';  
	            document.getElementById('click').appendChild(img);  
	        }  
	    });  
    </script>
</body>
</html>